<template>
	<div class="box">
		<div class="head">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path:'/consult' }"><span style="font-size: 18px;">咨询管理</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="main">
			<div class="top">
				<span style="margin-left: 10px;">搜索:</span>
				<input type="text" placeholder="请输入内容标题" v-model="ss">
				<button :class="isActive?'buttontwo':'button'" @click="seach()">查询</button>
				<button class="buttontwo" @click="newbuild">新建</button>
			</div>
			<div class="form">
				<template>
					<el-table :data="tableData" style="width: 100%;">
						<el-table-column prop="id" label="序号" width="180">
						</el-table-column>
						<el-table-column prop="information_title" label="标题" width="180">
						</el-table-column>
						<el-table-column prop="information_time" label="发布时间">
						</el-table-column>
						<el-table-column prop="information_number" label="浏览数">
						</el-table-column>
						<el-table-column prop="information_state" label="状态">
							<template slot-scope="scope">
								<span class="jr">{{scope.row.information_state==1?'已上架':'已下架'}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="cz" label="操作">
							<template slot-scope="scope">
								<span class="jr" @click="compile(scope.row.id,scope.row)">编辑</span>
								<span class="jr" @click="del(scope.row.id)">删除</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<el-dialog title="新建" :visible.sync="centerDialogVisible" width="40%" center>
				<el-row>
					<el-col :span="24">
						<span>内容标题</span>
						<el-input v-model="title" placeholder="请输入资讯标题" style="width: 40%; margin-left: 10px;">
						</el-input>
					</el-col>
				</el-row>
				<el-row style="margin-top: 20px;">
					<el-col :span="24">
						<p style="float: left;">内容封面</p>
						<el-upload :action="url" list-type="picture-card" :auto-upload="false" :on-change="beforeUpload"
							style="float: left;margin: 5%;">
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
							<img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
					</el-col>
				</el-row>
				<el-row style="margin-top: 20px;">
					<el-col :span="24">
						<p style="float: left;">内容介绍</p>
						<el-input type="textarea" :autosize="{ minRows: 6, maxRows:8}" placeholder="请输入内容"
							v-model="textarea" style="width: 85%;float: left;margin-left: 10px; margin-top: 10px;">
						</el-input>
					</el-col>
				</el-row>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				ss: '',
				isActive: false,
				centerDialogVisible: false,
				dialogImageUrl: '',
				dialogVisible: false,
				title: '',
				textarea: '',
				file: '',
				isup: false,
				id:'',
				url: 'http://localhost:3000/admin/upinformation_img?token=' + this.$store.state.admin.token,
			}
		},
		watch: {
			ss(e) {
				if (e.length > 0) {
					this.isActive = true
				} else {
					this.isActive = false
				}
			}
		},
		mounted() {
			this.getinformation()
		},
		methods: {
			getinformation() {
				var _this = this
				axios.get('/getinformation').then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			seach() {
				var _this = this
				axios.get('/getinformation', {
					params: {
						title: this.ss
					}
				}).then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			newbuild() {
				this.centerDialogVisible = true
			},
			compile(id, data) {
				this.title = data.information_title
				this.textarea = data.information_desc	
				this.id = data.id
				console.log(data)
				this.isup = true
				this.centerDialogVisible = true
			},
			del(id) {
				var _this = this
				axios.get('/delinformation', {
					params: {
						id
					}
				}).then(function(res) {
					console.log(res)
					_this.getinformation()
				})
			},
			submit() {
				if (this.isup) {
					console.log(this.title)
					var _this = this
					axios.post('/setinformation',{
						id:_this.id,
						title:_this.title,
						textarea:_this.textarea
					}).then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							_this.centerDialogVisible = false
							_this.getinformation()
							_this.title = ''
							_this.textarea = ''
							_this.isup = false
							_this.id = ''
							_this.dialogImageUrl = ''
							_this.$message({
								message: res.data.msg
							})
						}
					})
				} else {
					const formData = new FormData()
					formData.append("file", this.file.raw)
					formData.append("textarea", this.textarea)
					formData.append("title", this.title)
					var _this = this
					axios.post('/addinformation', formData).then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							_this.centerDialogVisible = false
							_this.getinformation()
							_this.title = ''
							_this.file = ''
							_this.textarea = ''
							_this.dialogImageUrl = ''
							_this.$message({
								message: res.data.msg
							})
						}
					})
				}

			},
			beforeUpload(file, filelist) {
				console.log(file, filelist);
				this.file = file
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 80%;
	}

	.head {
		width: 100%;
		height: 5%;
	}

	.top {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: left;
	}

	/deep/.el-dialog {
		width: 30%;
	}

	/deep/ .el-table thead th.el-table__cell {
		background-color: #f5f5f5;
		text-align: center;
	}

	/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
		text-align: center;
	}

	/deep/ .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border: 1px solid #EBEEF5;
		;
	}

	.main {
		width: 100%;
		height: 700px;
		background: #FFFFFF;
	}

	.jr {
		color: #6e9eec;
		margin-left: 10px;
		text-decoration: none;
	}

	.button {
		margin-left: 10px;
		background: gray;
		color: #fff;
		border: none;
	}

	.buttontwo {
		margin-left: 15px;
		background: #0099FF;
		color: #fff;
		border: none;
	}

	.add {
		width: 400px;
		height: 500px;
		background: red;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

	}

	.avatar-uploader {
		width: 80%;
		margin-left: 10%;
		margin-top: 15px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px solid gray;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
